<%--
  Created by IntelliJ IDEA.
  User: xianfei
  Date: 15-3-2
  Time: 上午11:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<html>
<head>
    <title>主页管理</title>
    <script>
        $(function () {
            $("#back").click(function () {
                window.location.href = "/home/show";
            });
            $(".introImg:first").change(function () {
                $("#addIntroImg").show();
                $("#delIntroImg").show();
            });
            $(".infoImg:first").change(function () {
                $("#addInfoImg").show();
                $("#delInfoImg").show();
            });
            $(".partnersImg:first").change(function () {
                $("#addPartnersImg").show();
                $("#delPartnersImg").show();
            });
            $(".delImg").hide();
            bindIntro();
            bindInfo();
            bindPart();

        });

        function bindIntro() {
            var delIntroImgs = $("[id^=delIntroImg_]");
            for (var i = 0; i < delIntroImgs.length; i++) {
                delIntroImgs.eq(i).bind({
                    mouseenter: function (e) {
                        $(this).show();
                    },
                    mouseleave: function (e) {
                        $(this).hide();
                    }
                });
            }
        }

        function bindInfo() {
            var delInfoImgs = $("[id^=delInfoImg_]");
            for (var i = 0; i < delInfoImgs.length; i++) {
                delInfoImgs.eq(i).bind({
                    mouseenter: function (e) {
                        $(this).show();
                    },
                    mouseleave: function (e) {
                        $(this).hide();
                    }
                });
            }
        }

        function bindPart() {
            var delPartnersImgs = $("[id^=delPartnersImg_]");
            for (var i = 0; i < delPartnersImgs.length; i++) {
                delPartnersImgs.eq(i).bind({
                    mouseenter: function (e) {
                        $(this).show();
                    },
                    mouseleave: function (e) {
                        $(this).hide();
                    }
                });
            }
        }

        function mouseover(id) {
            var index = id.substr(9);
            $("#delIntroImg_" + index).show();
        }
        function mouseout(id) {
            var index = id.substr(9);
            $("#delIntroImg_" + index).hide();
        }
        function infomouseover(id) {
            var index = id.substr(8);
            $("#delInfoImg_" + index).show();
        }
        function partmouseover(id) {
            var index = id.substr(12);
            $("#delPartnersImg_" + index).show();
        }
        function infomouseout(id) {
            var index = id.substr(8);
            $("#delInfoImg_" + index).hide();
        }
        function partmouseout(id) {
            var index = id.substr(12);
            $("#delPartnersImg_" + index).hide();
        }

        function delImg(type, imgGuid) {
            if (type == "intro") {
                $.ajax({
                    url: "/home/delImg/" + imgGuid + "/intro",
                    type: "GET",
                    dataType: "json",
                    success: function (data) {
                        $("#introImgContent").empty();
                        $("#introImgContent").html(data);
                        bindIntro();
                        $(".delImg").hide();
                    }
                });
            } else if (type == "info") {
                $.ajax({
                    url: "/home/delImg/" + imgGuid + "/info",
                    type: "GET",
                    dataType: "json",
                    success: function (data) {
                        $("#infoImgContent").empty();
                        $("#infoImgContent").html(data);
                        bindInfo();
                        $(".delImg").hide();
                    }
                });
            } else if (type == "partners") {
                $.ajax({
                    url: "/home/delImg/" + imgGuid + "/partners",
                    type: "GET",
                    dataType: "json",
                    success: function (data) {
                        $("#partImgContent").empty();
                        $("#partImgContent").html(data);
                        bindPart();
                        $(".delImg").hide();
                    }
                });
            }

        }

        function addImage(img) {
            if (img == "introImg") {
                var content = '<input type="file"  name="introImg" class="introImg">';
                if ($(".introImg").length < 6) {
                    $(".introImg:last").after(content);
                }
            } else if (img == "infoImg") {
                var content = '<input type="file"  name="infoImg" class="infoImg">';
                if ($(".infoImg").length < 4) {
                    $(".infoImg:last").after(content);
                }
            } else if (img == "partnersImg") {
                var content = '<input type="file"  name="partnersImg" class="partnersImg">';
                $(".partnersImg:last").after(content);
            }
        }

        function delImage(img) {
            if (img == "introImg") {
                if ($(".introImg").length > 1) {
                    $(".introImg:last").remove();
                } else {
                    $(".introImg:last").val("");
                }
            } else if (img == "infoImg") {
                if ($(".infoImg").length > 1) {
                    $(".infoImg:last").remove();
                } else {
                    $(".infoImg:last").val("");
                }
            } else if (img == "partnersImg") {
                if ($(".partnersImg").length > 1) {
                    $(".partnersImg:last").remove();
                } else {
                    $(".partnersImg:last").val("");
                }
            }
        }
    </script>
</head>
<body>
<form:form commandName="homePageDTO" action="/home/update" enctype="multipart/form-data">
    <form:hidden path="id"/>
    <form:hidden path="guid"/>
    <table class="table table-striped">
        <tbody>
        <tr>
            <td>标题:</td>
            <td><form:textarea path="title"/><form:errors path="title" cssClass="t16"/></td>
        </tr>
        <tr>
            <td>内容:</td>
            <td><form:textarea path="contents"/><form:errors path="contents" cssClass="t16"/></td>
        </tr>
        <tr>
            <td>漫庭介绍:</td>
            <td>
                <div id="introImgContent">
                    <c:forEach items="${homePageDTO.introImgGuids}" var="introImgGuids" varStatus="status">
                        <img style="width:150px;height:70px" src="/public/image/${introImgGuids}"
                             id="introImg_${status.index}"
                             onmouseover="mouseover('introImg_${status.index}')"
                             onmouseout="mouseout('introImg_${status.index}')">
                        <img src="/public/img/x.png" class="delImg" onclick="delImg('intro','${introImgGuids}')"
                             style="margin-top: -35px;margin-left:-39px;opacity:0.8" id="delIntroImg_${status.index}">
                    </c:forEach>
                </div>
                <input type="file" name="introImg" class="introImg"><form:errors path="introImg" cssClass="t16"/>
                <a href="javascript:void(0)" onclick="addImage('introImg')" id="addIntroImg" style="display:none">添加</a>&nbsp;
                <a href="javascript:void(0)" onclick="delImage('introImg')" id="delIntroImg" style="display:none">删除</a>
            </td>
        </tr>
        <tr>
            <td>漫庭信息:</td>
            <td>
                <div id="infoImgContent">
                    <c:forEach items="${homePageDTO.infoImgGuids}" var="infoImgGuids" varStatus="status">
                        <img style="width:50px;height:70px" src="/public/image/${infoImgGuids}"
                             id="infoImg_${status.index}"
                             onmouseover="infomouseover('infoImg_${status.index}')"
                             onmouseout="infomouseout('infoImg_${status.index}')">
                        <img src="/public/img/x.png" class="delImg" onclick="delImg('info','${infoImgGuids}')"
                             style="margin-top: -35px;margin-left:-39px;opacity:0.8" id="delInfoImg_${status.index}">
                    </c:forEach>
                </div>
                <input type="file" name="infoImg" class="infoImg"><form:errors path="infoImg" cssClass="t16"/>
                <a href="javascript:void(0)" onclick="addImage('infoImg')" id="addInfoImg" style="display:none">添加</a>&nbsp;
                <a href="javascript:void(0)" onclick="delImage('infoImg')" id="delInfoImg" style="display:none">删除</a>
            </td>
        </tr>
        <tr>
            <td>合作伙伴:</td>
            <td>
                <div id="partImgContent">
                    <c:forEach items="${homePageDTO.partnersImgGuids}" var="partnersImgGuids" varStatus="status">
                        <img style="width:100px;height:50px" src="/public/image/${partnersImgGuids}"
                             id="partnersImg_${status.index}"
                             onmouseover="partmouseover('partnersImg_${status.index}')"
                             onmouseout="partmouseout('partnersImg_${status.index}')">
                        <img src="/public/img/x.png" class="delImg" onclick="delImg('partners','${partnersImgGuids}')"
                             style="margin-top: -35px;margin-left:-39px;opacity:0.8"
                             id="delPartnersImg_${status.index}">
                    </c:forEach>
                </div>
                <input type="file" name="partnersImg" class="partnersImg"><form:errors path="partnersImg"
                                                                                       cssClass="t16"/>
                <a href="javascript:void(0)" onclick="addImage('partnersImg')" id="addPartnersImg" style="display:none">添加</a>&nbsp;
                <a href="javascript:void(0)" onclick="delImage('partnersImg')" id="delPartnersImg" style="display:none">删除</a>
            </td>
        </tr>
        <tr>
            <td>操作:</td>
            <td><input type="submit" class="btn btn-primary" value="保存"/>&nbsp;
                <input type="button" class="btn btn-warning" value="返回" id="back"></td>
        </tr>
        </tbody>

    </table>
</form:form>
</body>
</html>